import React, { Component } from 'react'
import axios from 'axios';
/*
    类组件的生命周期分为3个阶段，分别是
    1、加载阶段
    2、更新和运行阶段
    3、卸载阶段
    一、加载阶段，涉及到的函数有三个
    1、构造函数
    2、render
    3、componentDidMount
*/
export default class LifeCycle extends Component {
  /*
    构造函数的作用
    1、初始化state
    2、为类中的实例化方法绑定this
    3、完成createRef函数的调用等
    注意点：如上的三个操作，必须要在super()函数调用之后
  */
  constructor(){
    super()
    console.log('------constructor------------');
    this.state={
        houses:[]
    }
  }
  /*
   render函数是一个跨越两个阶段函数
   在加载阶段调用1次，然后再运行和更新阶段运行多次
   render函数的返回值返回返回的是该组件的页面结构，是一个JSX,如果没有返回值，那么页面就是空白的
   */
  render() {
    console.log('------render------------');
    const {houses}=this.state
    return (<>
        <h1>生命周期函数演示</h1>
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>地址</td>
                    <td>联系电话</td>
                </tr>
            </thead>
            <tbody>
                {
                   houses.map(item=><tr key={item.id}>
                      <td>{item.id}</td>
                      <td>{item.name}</td>
                      <td>{item.price}</td>
                      <td>{item.address}</td>
                      <td>{item.tel}</td>

                   </tr>) 
                }
            </tbody>
        </table>
    </>)
  }
  /*
    componentDidMount相当于vue中的mounted生命周期钩子，主要在这里完成如下操作
    1、DOM操作
    2、完成操ajax等网络请求服务
    3、设置定时器等作
    4、进行全局事件的绑定
  */
  getHouse=async()=>{
      let result=await axios.get("https://www.fastmock.site/mock/29c9979005cb7d0664c46ac737665b56/houses/getAllHouse")
      console.log('result',result.data);
      this.setState(()=>{
        return{
            houses:result.data
        }
      })
    }
  componentDidMount(){
    console.log('------componentDidMount------------');
    this.getHouse()
  }
}
